import { Button, Card, Form, Space, Input, Select, Table, message } from 'antd'
import { SearchOutlined } from '@ant-design/icons';
import React from 'react'
import { ColumnsType } from 'antd/lib/table';
import { HospitalListItem, HospitalListItems, ProvinceItems } from '@/api/hospital/model/hospitalList';
import { useEffect, useState } from 'react';
import { reqGetCityOrDistrict, reqGetHospitalList, reqGetHospitalType, reqGetProvinces, reqUpdateHospitalStatus } from '@/api/hospital/hospitalList';
import { useForm } from 'antd/lib/form/Form';
import { Link } from 'react-router-dom';

export default function HospitalList() {

  //定义表格结构
  let columns: ColumnsType<HospitalListItem> = [
    {
      title: '序号',
      render: (a, b, index) => {
        return index + 1;
      }
    },
    {
      title: '医院logo',
      dataIndex: 'logoData',
      render: (a, b, index) => {
        return <img width="60" src={'data:image/png;base64,' + a} />
      }
    },
    {
      title: '医院名称',
      dataIndex: 'hosname',
    },
    {
      title: '等级',
      render: (a, record) => {
        return record.param.hostypeString;
      }
    },
    {
      title: '详细地址',
      render: (a, record) => {
        return record.param.fullAddress
      }
    },
    {
      title: '状态',
      dataIndex: 'status',
      render: (v) => {
        return v === 0 ? '未上线' : '已上线';
      }
    },
    {
      title: '创建时间',
      dataIndex: 'createTime'
    },
    {
      title: '操作',
      width: 250,
      fixed: 'right',
      render: (a,record) => {
        return <Space>
          <Link to={`/syt/hospital/hostpitalList/show?id=${record.id}`}><Button type="primary">查看</Button></Link>
          <Link to={`/syt/hospital/hostpitalList/schedule/${record.hoscode}`}><Button type="primary">排班</Button></Link>
          <Button onClick={async () => {
            await reqUpdateHospitalStatus(record.id, record.status ? 0 : 1);
            message.success('更新成功');
            setFresh(fresh => !fresh);
          }} type="primary">{record.status ? '下线' : '上线'}</Button>
        </Space>
      }
    },
  ];

  //定义省份信息的状态
  let [provinces, setProvinces] = useState<ProvinceItems>([]);
  let [cities, setCities] = useState<ProvinceItems>([]);
  let [district, setDistrict] = useState<ProvinceItems>([]);
  let [hostypes, setHostypes] = useState<ProvinceItems>([]);
  //定义医院列表的状态
  let [hospital, setHospital] = useState<HospitalListItems>([]);
  //定义与分页相关的状态
  let [current, setCurrent] = useState(1);
  let [total, setTotal] = useState(0);
  let [pageSize, setPageSize] = useState(5);
  //loading
  let [loading, setLoading] = useState(false);
  //声明一个状态
  let [fields, setFields] = useState<any>({});
  //获取form对象
  let [form] = useForm();
  //
  let [fresh, setFresh] = useState(false);

  //组件挂载完毕的操作
  useEffect(() => {
    let getProvince = async () => {
      //请求获取所有的省份
      let result = await reqGetProvinces();
      //更新状态
      setProvinces(result);
    };
    //调用函数
    getProvince();
    //声明一个函数获取医院类型
    let getHospitalType = async () => {
      //发送请求
      let hostypes = await reqGetHospitalType();
      //更新状态
      setHostypes(hostypes);
    }

    getHospitalType();
  }, []);

  //声明一个函数 getCity
  let getCity = async (value: any) => {
    //清空城市的列表
    setCities([]);
    setDistrict([]);
    form.setFieldsValue({ cityCode: undefined, districtCode: undefined })
    //获取省份对应的城市信息
    let cities = await reqGetCityOrDistrict(value);
    //更新城市的状态
    setCities(cities);
  }

  //声明一个函数 getDistrict
  let getDistrict = async (value: any) => {
    setDistrict([]);
    form.setFieldsValue({ districtCode: undefined })
    //根据城市 id 获取对应的区县数据
    let district = await reqGetCityOrDistrict(value);
    //更新状态
    setDistrict(district);
  }

  //组件挂载完毕发送请求
  useEffect(() => {
    //获取医院列表i
    let getHospital = async () => {
      //修改 loading 的状态
      setLoading(true);
      let result = await reqGetHospitalList({ page: current, limit: pageSize, ...fields });
      //更新状态
      setHospital(result.content);
      //更新分页的总数状态
      setTotal(result.totalElements);
      //修改 loading 的状态
      setLoading(false);
    }
    getHospital();
  }, [current, pageSize, fields, fresh])


  //声明 finish 函数
  let finish = async () => {
    //获取表单的输入值
    let fields = form.getFieldsValue();
    //更新状态
    setFields(fields);
  }

  return (
    <Card>
      {/* 表单元素 */}
      <Form
        layout={'inline'}
        form={form}
        onFinish={finish}
      >
        <Form.Item style={{ width: 200, marginBottom: 20 }} name="provinceCode">
          <Select placeholder="请选择省" onChange={getCity}>
            {
              provinces.map(item => {
                return <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>
              })
            }
          </Select>
        </Form.Item>
        <Form.Item style={{ width: 200 }} name="cityCode">
          <Select placeholder="请选择市" onChange={getDistrict}>
            {
              cities.map(item => {
                return <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>
              })
            }
          </Select>
        </Form.Item>
        <Form.Item style={{ width: 200 }} name="districtCode">
          <Select placeholder="请选择区">
            {
              district.map(item => {
                return <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>
              })
            }
          </Select>
        </Form.Item>
        <Form.Item name={'hosname'}>
          <Input placeholder="医院名称" />
        </Form.Item>
        <Form.Item name={'hoscode'}>
          <Input placeholder="医院编号" />
        </Form.Item>
        <Form.Item style={{ width: 200 }} name="hostype">
          <Select placeholder="医院类型">
            {
              hostypes.map(item => {
                return <Select.Option key={item.id} value={item.value}>{item.name}</Select.Option>
              })
            }
          </Select>
        </Form.Item>
        <Form.Item style={{ width: 200 }} name="status">
          <Select placeholder="请选择医院状态">
            <Select.Option value="1">已上线</Select.Option>
            <Select.Option value="0">未上线</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item>
          <Space>
            <Button type="primary" htmlType="submit" icon={<SearchOutlined />} >查询</Button>
            <Button>清空</Button>
          </Space>
        </Form.Item>
      </Form>
      <div className="h-20"></div>
      {/* 表格结构 */}
      <Table
        loading={loading}
        dataSource={hospital}
        columns={columns}
        bordered
        scroll={{ x: 1300 }}
        rowKey={'id'}
        pagination={{
          current,
          total,
          showSizeChanger: true,
          pageSizeOptions: [5, 10, 15, 20],
          pageSize,
          onChange: (page: number, pageSize: number) => {
            //更新页码和每页显示的状态状态
            setCurrent(page);
            setPageSize(pageSize);
          }
        }}
      />
    </Card>
  )
}
